<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="所属项目" prop="projectId">
        <el-select clearable @change="handleQuery" v-model="queryParams.projectId" placeholder="请选择项目">
          <el-option v-for="item in projectOptions" :key="item.id" :label="item.projectName" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="桩位编号" prop="pileNo">
        <el-input v-model="queryParams.pileNo" placeholder="请输入桩位编号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- 
      <el-form-item label="经度" prop="longitude">
        <el-input v-model="queryParams.longitude" placeholder="请输入经度" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="纬度" prop="latitude">
        <el-input v-model="queryParams.latitude" placeholder="请输入纬度" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="X坐标/经度" prop="x">
        <el-input v-model="queryParams.x" placeholder="请输入X坐标/经度" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="Y坐标/纬度" prop="y">
        <el-input v-model="queryParams.y" placeholder="请输入Y坐标/纬度" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="X坐标/经度最小" prop="minX">
        <el-input v-model="queryParams.minX" placeholder="请输入X坐标/经度最小" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="Y坐标/纬度最小" prop="minY">
        <el-input v-model="queryParams.minY" placeholder="请输入Y坐标/纬度最小" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="X坐标/经度最大" prop="maxX">
        <el-input v-model="queryParams.maxX" placeholder="请输入X坐标/经度最大" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="Y坐标/纬度最大" prop="maxY">
        <el-input v-model="queryParams.maxY" placeholder="请输入Y坐标/纬度最大" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="桩深" prop="pileDepth">
        <el-input v-model="queryParams.pileDepth" placeholder="请输入桩深" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="桩直径" prop="pileDiameter">
        <el-input v-model="queryParams.pileDiameter" placeholder="请输入桩直径" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="桩长" prop="pileLength">
        <el-input v-model="queryParams.pileLength" placeholder="请输入桩长" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="电流" prop="current">
        <el-input v-model="queryParams.current" placeholder="请输入电流" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="最大电流" prop="maxCurrenth">
        <el-input v-model="queryParams.maxCurrenth" placeholder="请输入最大电流" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="上升或下降钻速" prop="ascentDescentSpeed">
        <el-input v-model="queryParams.ascentDescentSpeed" placeholder="请输入上升或下降钻速" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="转速" prop="revolutionSpeed">
        <el-input v-model="queryParams.revolutionSpeed" placeholder="请输入转速" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="是否扩底" prop="isExpandedBase">
        <el-input v-model="queryParams.isExpandedBase" placeholder="请输入是否扩底" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="扩地直径" prop="expandedDiameter">
        <el-input v-model="queryParams.expandedDiameter" placeholder="请输入扩地直径" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="扩底高度" prop="expandedDepth">
        <el-input v-model="queryParams.expandedDepth" placeholder="请输入扩底高度" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="泵送混凝土量" prop="concretePumpVolume">
        <el-input v-model="queryParams.concretePumpVolume" placeholder="请输入泵送混凝土量" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="桩容积率" prop="pileConsolidationRatio">
        <el-input v-model="queryParams.pileConsolidationRatio" placeholder="请输入桩容积率" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="泵缸直径" prop="pumpCylinderDiameter">
        <el-input v-model="queryParams.pumpCylinderDiameter" placeholder="请输入泵缸直径" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="泵缸长度" prop="pumpCylinderLength">
        <el-input v-model="queryParams.pumpCylinderLength" placeholder="请输入泵缸长度" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="泵容积率" prop="pumpConsolidationRatio">
        <el-input v-model="queryParams.pumpConsolidationRatio" placeholder="请输入泵容积率" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="桩机设备id" prop="equipmentId">
        <el-input v-model="queryParams.equipmentId" placeholder="请输入桩机设备id" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="操作模式" prop="operationMode">
        <el-input v-model="queryParams.operationMode" placeholder="请输入操作模式" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker clearable v-model="queryParams.startTime" type="date" value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="请选择开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker clearable v-model="queryParams.endTime" type="date" value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="请选择结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="成桩用时" prop="pileConstructionTime">
        <el-input v-model="queryParams.pileConstructionTime" placeholder="请输入成桩用时" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="深度" prop="depth">
        <el-input v-model="queryParams.depth" placeholder="请输入深度" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="用量" prop="consumption">
        <el-input v-model="queryParams.consumption" placeholder="请输入用量" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="创建人id" prop="creatorId">
        <el-input v-model="queryParams.creatorId" placeholder="请输入创建人id" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="创建人姓名" prop="creatorName">
        <el-input v-model="queryParams.creatorName" placeholder="请输入创建人姓名" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="最后修改人id" prop="lastUpdaterId">
        <el-input v-model="queryParams.lastUpdaterId" placeholder="请输入最后修改人id" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="最后修改人姓名" prop="lastUpdaterName">
        <el-input v-model="queryParams.lastUpdaterName" placeholder="请输入最后修改人姓名" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="最后修改时间" prop="lastUpdateTime">
        <el-date-picker clearable v-model="queryParams.lastUpdateTime" type="date" value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="请选择最后修改时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="桩位识别码" prop="pileCode">
        <el-input v-model="queryParams.pileCode" placeholder="请输入桩位识别码" clearable @keyup.enter.native="handleQuery" />
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['pile:pileInfo:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['pile:pileInfo:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['pile:pileInfo:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['pile:pileInfo:export']">导出</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="success" icon="el-icon-s-data" size="mini" @click="">曲线图</el-button>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="pileInfoList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <!-- <el-table-column label="主键" align="center" prop="id" /> -->
      <el-table-column label="所属项目" align="center" prop="projectId">
        <template slot-scope="scope">
          <span>{{ getProjectNameById(scope.row.projectId) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="桩位编号" align="center" prop="pileNo" />
      <!-- <el-table-column label="经度" align="center" prop="longitude" />
      <el-table-column label="纬度" align="center" prop="latitude" /> -->
      <!-- <el-table-column label="X坐标/经度" align="center" prop="x" />
      <el-table-column label="Y坐标/纬度" align="center" prop="y" /> -->
      <!-- <el-table-column label="X坐标/经度最小" align="center" prop="minX" />
      <el-table-column label="Y坐标/纬度最小" align="center" prop="minY" />
      <el-table-column label="X坐标/经度最大" align="center" prop="maxX" />
      <el-table-column label="Y坐标/纬度最大" align="center" prop="maxY" /> -->
      <el-table-column label="桩深" width="120" align="center" prop="pileDepth" class-name="highlight-col"
        label-class-name="highlight-header">
        <template slot-scope="scope">
          <span class="badge--pill badge--depth" :class="getDepthStatus(scope.row.pileDepth)"
            :title="`桩深 ${formatNumber(scope.row.pileDepth, 1)} 米`">
            <span class="icon" v-html="ICON_RULER"></span>
            <span class="txt">{{ formatNumber(scope.row.pileDepth, 1) }} m</span>
          </span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="桩直径" align="center" prop="pileDiameter" /> -->
      <!-- <el-table-column label="桩长" align="center" prop="pileLength" /> -->
      <!-- <el-table-column label="桩类型" align="center" prop="pileType" /> -->
      <el-table-column label="最大电流" width="120" align="center" prop="maxCurrenth " class-name="highlight-col"
        label-class-name="highlight-header">
        <template slot-scope="scope">
          <span class="badge--pill badge--current" :class="getCurrentStatus(scope.row.current)"
            :title="`电流 ${formatNumber(scope.row.maxCurrenth, 1)} A`">
            <span class="icon" v-html="ICON_BOLT"></span>
            <span class="txt">{{ formatNumber(scope.row.maxCurrenth, 1) }} A</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="电流" align="center" prop="current">
        <template slot-scope="scope">
          {{ formatNumber(scope.row.current, 1) }} A
        </template>
      </el-table-column>
      <el-table-column label="钻速(升/降)" align="center" prop="ascentDescentSpeed" />
      <el-table-column label="转速" align="center" prop="revolutionSpeed">
        <template slot-scope="scope">
          {{ formatNumber(scope.row.revolutionSpeed, 1) }} r/min
        </template>
      </el-table-column>
      <!-- <el-table-column label="是否扩底" align="center" prop="isExpandedBase" /> -->
      <!-- <el-table-column label="扩地直径" align="center" prop="expandedDiameter" /> -->
      <!-- <el-table-column label="扩底高度" align="center" prop="expandedDepth" /> -->
      <!-- <el-table-column label="泵送混凝土量" align="center" prop="concretePumpVolume" /> -->
      <!-- <el-table-column label="桩容积率" align="center" prop="pileConsolidationRatio" />
      <el-table-column label="泵缸直径" align="center" prop="pumpCylinderDiameter" />
      <el-table-column label="泵缸长度" align="center" prop="pumpCylinderLength" />
      <el-table-column label="泵容积率" align="center" prop="pumpConsolidationRatio" /> -->
      <!-- <el-table-column label="桩机设备id" align="center" prop="equipmentId" /> -->
      <!-- <el-table-column label="操作模式" align="center" prop="operationMode" /> -->
      <el-table-column label="开始时间" align="center" prop="startTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.startTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" align="center" prop="endTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.endTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="成桩用时" width="120" align="center" prop="pileConstructionTime" class-name="highlight-col"
        label-class-name="highlight-header">
        <template slot-scope="scope">
          <span class="badge--pill badge--time"
            :class="getTimeStatus(convertMsToMinutes(scope.row.pileConstructionTime))"
            :title="`成桩用时 ${convertMsToMinutes(scope.row.pileConstructionTime)} 分钟`">
            <span class="icon" v-html="ICON_CLOCK"></span>
            <span class="txt">{{ convertMsToMinutes(scope.row.pileConstructionTime) }} min</span>
          </span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="深度" align="center" prop="depth" /> -->
      <!-- <el-table-column label="用量" align="center" prop="consumption" /> -->
      <!-- <el-table-column label="创建人id" align="center" prop="creatorId" /> -->
      <!-- <el-table-column label="创建人姓名" align="center" prop="creatorName" /> -->
      <!-- <el-table-column label="最后修改人id" align="center" prop="lastUpdaterId" /> -->
      <!-- <el-table-column label="最后修改人姓名" align="center" prop="lastUpdaterName" /> -->
      <!-- <el-table-column label="最后修改时间" align="center" prop="lastUpdateTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.lastUpdateTime) }}</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="桩位识别码" align="center" prop="pileCode" /> -->
      <el-table-column label="操作" width="160" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['pile:pileInfo:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['pile:pileInfo:remove']">删除</el-button>
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)">详情</el-button>
          <el-button size="mini" type="text" icon="el-icon-s-data" @click="handleShowChart(scope.row)">曲线图表</el-button>
          <el-button size="mini" type="text" icon="el-icon-download"
            @click="handleDataExport(scope.row)">数据导出</el-button>

        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改项目桩位信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="项目id" prop="projectId">
          <el-input v-model="form.projectId" placeholder="请输入项目id" />
        </el-form-item>
        <el-form-item label="桩位编号" prop="pileNo">
          <el-input v-model="form.pileNo" placeholder="请输入桩位编号" />
        </el-form-item>
        <el-form-item label="经度" prop="longitude">
          <el-input v-model="form.longitude" placeholder="请输入经度" />
        </el-form-item>
        <el-form-item label="纬度" prop="latitude">
          <el-input v-model="form.latitude" placeholder="请输入纬度" />
        </el-form-item>
        <el-form-item label="X坐标/经度" prop="x">
          <el-input v-model="form.x" placeholder="请输入X坐标/经度" />
        </el-form-item>
        <el-form-item label="Y坐标/纬度" prop="y">
          <el-input v-model="form.y" placeholder="请输入Y坐标/纬度" />
        </el-form-item>
        <el-form-item label="X坐标/经度最小" prop="minX">
          <el-input v-model="form.minX" placeholder="请输入X坐标/经度最小" />
        </el-form-item>
        <el-form-item label="Y坐标/纬度最小" prop="minY">
          <el-input v-model="form.minY" placeholder="请输入Y坐标/纬度最小" />
        </el-form-item>
        <el-form-item label="X坐标/经度最大" prop="maxX">
          <el-input v-model="form.maxX" placeholder="请输入X坐标/经度最大" />
        </el-form-item>
        <el-form-item label="Y坐标/纬度最大" prop="maxY">
          <el-input v-model="form.maxY" placeholder="请输入Y坐标/纬度最大" />
        </el-form-item>
        <el-form-item label="桩深" prop="pileDepth">
          <el-input v-model="form.pileDepth" placeholder="请输入桩深" />
        </el-form-item>
        <el-form-item label="桩直径" prop="pileDiameter">
          <el-input v-model="form.pileDiameter" placeholder="请输入桩直径" />
        </el-form-item>
        <el-form-item label="桩长" prop="pileLength">
          <el-input v-model="form.pileLength" placeholder="请输入桩长" />
        </el-form-item>
        <el-form-item label="电流" prop="current">
          <el-input v-model="form.current" placeholder="请输入电流" />
        </el-form-item>
        <el-form-item label="最大电流" prop="maxCurrenth">
          <el-input v-model="form.maxCurrenth" placeholder="请输入最大电流" />
        </el-form-item>
        <el-form-item label="上升或下降钻速" prop="ascentDescentSpeed">
          <el-input v-model="form.ascentDescentSpeed" placeholder="请输入上升或下降钻速" />
        </el-form-item>
        <el-form-item label="转速" prop="revolutionSpeed">
          <el-input v-model="form.revolutionSpeed" placeholder="请输入转速" />
        </el-form-item>
        <el-form-item label="是否扩底" prop="isExpandedBase">
          <el-input v-model="form.isExpandedBase" placeholder="请输入是否扩底" />
        </el-form-item>
        <el-form-item label="扩地直径" prop="expandedDiameter">
          <el-input v-model="form.expandedDiameter" placeholder="请输入扩地直径" />
        </el-form-item>
        <el-form-item label="扩底高度" prop="expandedDepth">
          <el-input v-model="form.expandedDepth" placeholder="请输入扩底高度" />
        </el-form-item>
        <el-form-item label="泵送混凝土量" prop="concretePumpVolume">
          <el-input v-model="form.concretePumpVolume" placeholder="请输入泵送混凝土量" />
        </el-form-item>
        <el-form-item label="桩容积率" prop="pileConsolidationRatio">
          <el-input v-model="form.pileConsolidationRatio" placeholder="请输入桩容积率" />
        </el-form-item>
        <el-form-item label="泵缸直径" prop="pumpCylinderDiameter">
          <el-input v-model="form.pumpCylinderDiameter" placeholder="请输入泵缸直径" />
        </el-form-item>
        <el-form-item label="泵缸长度" prop="pumpCylinderLength">
          <el-input v-model="form.pumpCylinderLength" placeholder="请输入泵缸长度" />
        </el-form-item>
        <el-form-item label="泵容积率" prop="pumpConsolidationRatio">
          <el-input v-model="form.pumpConsolidationRatio" placeholder="请输入泵容积率" />
        </el-form-item>
        <el-form-item label="桩机设备id" prop="equipmentId">
          <el-input v-model="form.equipmentId" placeholder="请输入桩机设备id" />
        </el-form-item>
        <el-form-item label="操作模式" prop="operationMode">
          <el-input v-model="form.operationMode" placeholder="请输入操作模式" />
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker clearable v-model="form.startTime" type="date" value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker clearable v-model="form.endTime" type="date" value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="成桩用时" prop="pileConstructionTime">
          <el-input v-model="form.pileConstructionTime" placeholder="请输入成桩用时" />
        </el-form-item>
        <el-form-item label="深度" prop="depth">
          <el-input v-model="form.depth" placeholder="请输入深度" />
        </el-form-item>
        <el-form-item label="用量" prop="consumption">
          <el-input v-model="form.consumption" placeholder="请输入用量" />
        </el-form-item>
        <el-form-item label="创建人id" prop="creatorId">
          <el-input v-model="form.creatorId" placeholder="请输入创建人id" />
        </el-form-item>
        <el-form-item label="创建人姓名" prop="creatorName">
          <el-input v-model="form.creatorName" placeholder="请输入创建人姓名" />
        </el-form-item>
        <el-form-item label="最后修改人id" prop="lastUpdaterId">
          <el-input v-model="form.lastUpdaterId" placeholder="请输入最后修改人id" />
        </el-form-item>
        <el-form-item label="最后修改人姓名" prop="lastUpdaterName">
          <el-input v-model="form.lastUpdaterName" placeholder="请输入最后修改人姓名" />
        </el-form-item>
        <el-form-item label="最后修改时间" prop="lastUpdateTime">
          <el-date-picker clearable v-model="form.lastUpdateTime" type="date" value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择最后修改时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="桩位识别码" prop="pileCode">
          <el-input v-model="form.pileCode" placeholder="请输入桩位识别码" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 详情弹窗 -->
    <el-dialog :visible.sync="detailOpen" width="900px" :show-close="true" append-to-body class="pile-detail-dialog">
      <div class="pile-detail-title">桩位信息详情</div>

      <div class="pile-section-title">基本信息</div>
      <div class="pile-row-flex">
        <div class="pile-col-flex">
          <table class="pile-detail-table">
            <tr>
              <th class="left-align">项目ID</th>
              <td class="value">{{ detailForm.projectId }}</td>
            </tr>
            <tr>
              <th class="left-align">桩位编号</th>
              <td class="value">{{ detailForm.pileNo }}</td>
            </tr>
            <tr>
              <th class="left-align">经度</th>
              <td class="value">{{ detailForm.longitude }}</td>
            </tr>
            <tr>
              <th class="left-align">纬度</th>
              <td class="value">{{ detailForm.latitude }}</td>
            </tr>
            <tr>
              <th class="left-align">X坐标/经度</th>
              <td class="value">{{ detailForm.x }}</td>
            </tr>
            <tr>
              <th class="left-align">Y坐标/纬度</th>
              <td class="value">{{ detailForm.y }}</td>
            </tr>
            <tr>
              <th class="left-align">桩深</th>
              <td class="value">{{ detailForm.pileDepth }}</td>
            </tr>
            <tr>
              <th class="left-align">桩直径</th>
              <td class="value">{{ detailForm.pileDiameter }}</td>
            </tr>
            <tr>
              <th class="left-align">桩长</th>
              <td class="value">{{ detailForm.pileLength }}</td>
            </tr>
            <tr>
              <th class="left-align">桩类型</th>
              <td class="value">{{ detailForm.pileType }}</td>
            </tr>
            <tr>
              <th class="left-align">电流</th>
              <td class="value">{{ detailForm.current }}</td>
            </tr>
            <tr>
              <th class="left-align">最大电流</th>
              <td class="value">{{ detailForm.maxCurrenth }}</td>
            </tr>
            <tr>
              <th class="left-align">上升或下降钻速</th>
              <td class="value">{{ detailForm.ascentDescentSpeed }}</td>
            </tr>
            <tr>
              <th class="left-align">转速</th>
              <td class="value">{{ detailForm.revolutionSpeed }}</td>
            </tr>
            <tr>
              <th class="left-align">是否扩底</th>
              <td class="value">{{ detailForm.isExpandedBase }}</td>
            </tr>
            <tr>
              <th class="left-align">扩地直径</th>
              <td class="value">{{ detailForm.expandedDiameter }}</td>
            </tr>
            <tr>
              <th class="left-align">扩底高度</th>
              <td class="value">{{ detailForm.expandedDepth }}</td>
            </tr>
            <tr>
              <th class="left-align">泵送混凝土量</th>
              <td class="value">{{ detailForm.concretePumpVolume }}</td>
            </tr>
            <tr>
              <th class="left-align">桩容积率</th>
              <td class="value">{{ detailForm.pileConsolidationRatio }}</td>
            </tr>
            <tr>
              <th class="left-align">泵缸直径</th>
              <td class="value">{{ detailForm.pumpCylinderDiameter }}</td>
            </tr>
            <tr>
              <th class="left-align">泵缸长度</th>
              <td class="value">{{ detailForm.pumpCylinderLength }}</td>
            </tr>
            <tr>
              <th class="left-align">泵容积率</th>
              <td class="value">{{ detailForm.pumpConsolidationRatio }}</td>
            </tr>
            <tr>
              <th class="left-align">桩机设备ID</th>
              <td class="value">{{ detailForm.equipmentId }}</td>
            </tr>
            <tr>
              <th class="left-align">操作模式</th>
              <td class="value">{{ detailForm.operationMode }}</td>
            </tr>
          </table>
        </div>
        <div class="pile-col-flex">
          <table class="pile-detail-table">
            <tr>
              <th class="left-align">开始时间</th>
              <td class="value">{{ parseTime(detailForm.startTime) }}</td>
            </tr>
            <tr>
              <th class="left-align">结束时间</th>
              <td class="value">{{ parseTime(detailForm.endTime) }}</td>
            </tr>
            <tr>
              <th class="left-align">成桩用时</th>
              <td class="value">{{ formatMsToHoursMinutes(detailForm.pileConstructionTime) }}</td>
            </tr>
            <tr>
              <th class="left-align">深度</th>
              <td class="value">{{ detailForm.depth }}</td>
            </tr>
            <tr>
              <th class="left-align">用量</th>
              <td class="value">{{ detailForm.consumption }}</td>
            </tr>
            <tr>
              <th class="left-align">创建人ID</th>
              <td class="value">{{ detailForm.creatorId }}</td>
            </tr>
            <tr>
              <th class="left-align">创建人姓名</th>
              <td class="value">{{ detailForm.creatorName }}</td>
            </tr>
            <tr>
              <th class="left-align">最后修改人ID</th>
              <td class="value">{{ detailForm.lastUpdaterId }}</td>
            </tr>
            <tr>
              <th class="left-align">最后修改人姓名</th>
              <td class="value">{{ detailForm.lastUpdaterName }}</td>
            </tr>
            <tr>
              <th class="left-align">最后修改时间</th>
              <td class="value">{{ parseTime(detailForm.lastUpdateTime) }}</td>
            </tr>
            <tr>
              <th class="left-align">桩位识别码</th>
              <td class="value">{{ detailForm.pileCode }}</td>
            </tr>
            <tr>
              <th class="left-align">X坐标/经度最小</th>
              <td class="value">{{ detailForm.minX }}</td>
            </tr>
            <tr>
              <th class="left-align">Y坐标/纬度最小</th>
              <td class="value">{{ detailForm.minY }}</td>
            </tr>
            <tr>
              <th class="left-align">X坐标/经度最大</th>
              <td class="value">{{ detailForm.maxX }}</td>
            </tr>
            <tr>
              <th class="left-align">Y坐标/纬度最大</th>
              <td class="value">{{ detailForm.maxY }}</td>
            </tr>
          </table>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="detailOpen = false" type="primary" plain>关闭</el-button>
      </span>
    </el-dialog>

    <!-- 曲线图弹窗 -->
    <el-dialog :visible.sync="chartOpen" title="曲线图" width="900px" append-to-body>
      <div v-loading="chartLoading" style="max-height: 60vh; width: 100%; overflow-y: auto; overflow-x: hidden;">
        <div style="padding-top: 8px;">
          <el-tabs v-model="activeChartTab" @tab-click="onChartTabChange">
            <el-tab-pane label="电流/深度" name="currentDepth">
              <div style="height: 240px;">
                <ChartTable1 v-if="activeChartTab === 'currentDepth'" :chart="chart" />
              </div>
            </el-tab-pane>
            <el-tab-pane label="钻速/深度" name="speedDepth">
              <div style="height: 240px;">
                <ChartTable2 v-if="activeChartTab === 'speedDepth'" :chart="chart" />
              </div>
            </el-tab-pane>
            <el-tab-pane label="偏差/深度" name="deviationDepth">
              <div style="height: 240px;">
                <ChartTable3 v-if="activeChartTab === 'deviationDepth'" :chart="chart" />
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="chartOpen = false" type="primary" plain>关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listPileInfo, getPileInfo, delPileInfo, addPileInfo, updatePileInfo, getPileLine, proListAll } from "@/api/pile/pileInfo";
import ChartTable1 from "../com/chartTable1.vue";
import ChartTable2 from "../com/chartTable2.vue";
import ChartTable3 from '../com/chartTable3.vue'
import { listAllProjectContractInfo } from "@/api/production/projectContractInfo";
export default {
  name: "PileInfo",
  components: {
    ChartTable1,
    ChartTable2,
    ChartTable3,
  },
  data() {
    return {
      // 图标（直接内联 SVG，便于样式自适应）
      ICON_CLOCK: '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 7v5l3 3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="8.2" stroke="currentColor" stroke-width="1.2" fill="none" opacity=".65"/></svg>',
      ICON_BOLT: '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z" fill="currentColor" opacity=".85"/></svg>',
      ICON_RULER: '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3.5" y="4.5" width="17" height="15" rx="2" ry="2" stroke="currentColor" stroke-width="1.5"/><path d="M7 9h3M7 12h5M7 15h2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>',
      activeChartTab: 'currentDepth',
      chartData: null,
      chart: {
        depthData: [],
        currentData: [],
        timeData: [],
        drillingSpeedData: [],
        frontBackAngleDeviationData: [],
        leftRightAngleDeviationData: [],
        revolutionsPerMinuteData: [],
      },
      // 根路径
      baseURL: process.env.VUE_APP_BASE_API,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 项目桩位信息表格数据
      pileInfoList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectId: null,
        pileNo: null,
        longitude: null,
        latitude: null,
        x: null,
        y: null,
        minX: null,
        minY: null,
        maxX: null,
        maxY: null,
        pileDepth: null,
        pileDiameter: null,
        pileLength: null,
        pileType: null,
        current: null,
        maxCurrenth: null,
        ascentDescentSpeed: null,
        revolutionSpeed: null,
        isExpandedBase: null,
        expandedDiameter: null,
        expandedDepth: null,
        concretePumpVolume: null,
        pileConsolidationRatio: null,
        pumpCylinderDiameter: null,
        pumpCylinderLength: null,
        pumpConsolidationRatio: null,
        equipmentId: null,
        operationMode: null,
        startTime: null,
        endTime: null,
        pileConstructionTime: null,
        depth: null,
        consumption: null,
        creatorId: null,
        creatorName: null,
        lastUpdaterId: null,
        lastUpdaterName: null,
        lastUpdateTime: null,
        pileCode: null
      },
      // 表单参数
      form: {},
      // 详情弹框相关
      detailOpen: false,
      detailForm: {},
      // 曲线图弹框相关
      chartOpen: false,
      chartLoading: false,
      projectOptions: [],

      // 表单校验
      rules: {
        id: [
          { required: true, message: "主键不能为空", trigger: "blur" }
        ],
        projectId: [
          { required: true, message: "项目id不能为空", trigger: "blur" }
        ],
        pileNo: [
          { required: true, message: "桩位编号不能为空", trigger: "blur" }
        ],
        longitude: [
          { required: true, message: "经度不能为空", trigger: "blur" }
        ],
        latitude: [
          { required: true, message: "纬度不能为空", trigger: "blur" }
        ],
        x: [
          { required: true, message: "X坐标/经度不能为空", trigger: "blur" }
        ],
        y: [
          { required: true, message: "Y坐标/纬度不能为空", trigger: "blur" }
        ],
        minX: [
          { required: true, message: "X坐标/经度最小不能为空", trigger: "blur" }
        ],
        minY: [
          { required: true, message: "Y坐标/纬度最小不能为空", trigger: "blur" }
        ],
        maxX: [
          { required: true, message: "X坐标/经度最大不能为空", trigger: "blur" }
        ],
        maxY: [
          { required: true, message: "Y坐标/纬度最大不能为空", trigger: "blur" }
        ],
        pileDepth: [
          { required: true, message: "桩深不能为空", trigger: "blur" }
        ],
        pileDiameter: [
          { required: true, message: "桩直径不能为空", trigger: "blur" }
        ],
        pileLength: [
          { required: true, message: "桩长不能为空", trigger: "blur" }
        ],
        pileType: [
          { required: true, message: "桩类型不能为空", trigger: "change" }
        ],
        current: [
          { required: true, message: "电流不能为空", trigger: "blur" }
        ],
        maxCurrenth: [
          { required: true, message: "最大电流不能为空", trigger: "blur" }
        ],
        ascentDescentSpeed: [
          { required: true, message: "上升或下降钻速不能为空", trigger: "blur" }
        ],
        revolutionSpeed: [
          { required: true, message: "转速不能为空", trigger: "blur" }
        ],
        isExpandedBase: [
          { required: true, message: "是否扩底不能为空", trigger: "blur" }
        ],
        expandedDiameter: [
          { required: true, message: "扩地直径不能为空", trigger: "blur" }
        ],
        expandedDepth: [
          { required: true, message: "扩底高度不能为空", trigger: "blur" }
        ],
        concretePumpVolume: [
          { required: true, message: "泵送混凝土量不能为空", trigger: "blur" }
        ],
        pileConsolidationRatio: [
          { required: true, message: "桩容积率不能为空", trigger: "blur" }
        ],
        pumpCylinderDiameter: [
          { required: true, message: "泵缸直径不能为空", trigger: "blur" }
        ],
        pumpCylinderLength: [
          { required: true, message: "泵缸长度不能为空", trigger: "blur" }
        ],
        pumpConsolidationRatio: [
          { required: true, message: "泵容积率不能为空", trigger: "blur" }
        ],
        equipmentId: [
          { required: true, message: "桩机设备id不能为空", trigger: "blur" }
        ],
        operationMode: [
          { required: true, message: "操作模式不能为空", trigger: "blur" }
        ],
        startTime: [
          { required: true, message: "开始时间不能为空", trigger: "blur" }
        ],
        endTime: [
          { required: true, message: "结束时间不能为空", trigger: "blur" }
        ],
        pileConstructionTime: [
          { required: true, message: "成桩用时不能为空", trigger: "blur" }
        ],
        depth: [
          { required: true, message: "深度不能为空", trigger: "blur" }
        ],
        consumption: [
          { required: true, message: "用量不能为空", trigger: "blur" }
        ],
        creatorId: [
          { required: true, message: "创建人id不能为空", trigger: "blur" }
        ],
        creatorName: [
          { required: true, message: "创建人姓名不能为空", trigger: "blur" }
        ],
        lastUpdaterId: [
          { required: true, message: "最后修改人id不能为空", trigger: "blur" }
        ],
        lastUpdaterName: [
          { required: true, message: "最后修改人姓名不能为空", trigger: "blur" }
        ],
        lastUpdateTime: [
          { required: true, message: "最后修改时间不能为空", trigger: "blur" }
        ],
        pileCode: [
          { required: true, message: "桩位识别码不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getList();
    this.fetchProjectOptions && this.fetchProjectOptions();
  },
  methods: {
    // 将毫秒转换为分钟整数
    convertMsToMinutes(ms) {
      const num = Number(ms);
      if (!num || num < 0) return 0;
      return Math.floor(num / 60000);
    },
    // 数字格式化，保留 n 位小数
    formatNumber(value, fixed = 2) {
      const num = Number(value);
      if (!num && num !== 0) return '0';
      return isNaN(num) ? '0' : num.toFixed(fixed);
    },
    // 成桩用时状态：0 none；≤15 ok；≤30 warn；>30 danger
    getTimeStatus(minutes) {
      const m = Number(minutes) || 0;
      if (m === 0) return 'status-none';
      if (m <= 15) return 'status-ok';
      if (m <= 30) return 'status-warn';
      return 'status-danger';
    },
    // 电流状态：0 none；≤90 ok；≤110 warn；>110 danger
    getCurrentStatus(current) {
      const v = Number(current) || 0;
      if (v === 0) return 'status-none';
      if (v <= 90) return 'status-ok';
      if (v <= 110) return 'status-warn';
      return 'status-danger';
    },
    // 桩深状态：0 none；≤9.0 ok；≤9.5 warn；>9.5 danger
    getDepthStatus(depth) {
      const v = Number(depth) || 0;
      if (v === 0) return 'status-none';
      if (v <= 9.0) return 'status-ok';
      if (v <= 9.5) return 'status-warn';
      return 'status-danger';
    },
    // 毫秒转 “X时Y分”
    formatMsToHoursMinutes(milliseconds) {
      const ms = Number(milliseconds);
      if (!ms || ms < 0) return '-';
      const totalMinutes = Math.floor(ms / 60000);
      const hours = Math.floor(totalMinutes / 60);
      const minutes = totalMinutes % 60;
      if (hours === 0 && minutes === 0) return '0分';
      if (hours === 0) return `${minutes}分`;
      if (minutes === 0) return `${hours}时`;
      return `${hours}时${minutes}分`;
    },
    // 获取项目列表
    fetchProjectOptions() {
      proListAll().then((res) => {
        console.log('项目列表', res);
        this.projectOptions = res.data || [];
        if (this.projectOptions.length === 1 && !this.queryParams.projectId) {
          this.queryParams.projectId = this.projectOptions[0].id;
          this.handleQuery();
        }
      });
    },
    /** 根据项目ID获取项目名称 */
    getProjectNameById(projectId) {
      const item = (this.projectOptions || []).find(p => p.id == projectId)
      return item ? item.projectName : '--'
    },
    /** 查询项目桩位信息列表 */
    getList() {
      this.loading = true;
      listPileInfo(this.queryParams).then(response => {
        this.pileInfoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        projectId: null,
        pileNo: null,
        longitude: null,
        latitude: null,
        x: null,
        y: null,
        minX: null,
        minY: null,
        maxX: null,
        maxY: null,
        pileDepth: null,
        pileDiameter: null,
        pileLength: null,
        pileType: null,
        current: null,
        maxCurrenth: null,
        ascentDescentSpeed: null,
        revolutionSpeed: null,
        isExpandedBase: null,
        expandedDiameter: null,
        expandedDepth: null,
        concretePumpVolume: null,
        pileConsolidationRatio: null,
        pumpCylinderDiameter: null,
        pumpCylinderLength: null,
        pumpConsolidationRatio: null,
        equipmentId: null,
        operationMode: null,
        startTime: null,
        endTime: null,
        pileConstructionTime: null,
        depth: null,
        consumption: null,
        creatorId: null,
        creatorName: null,
        lastUpdaterId: null,
        lastUpdaterName: null,
        lastUpdateTime: null,
        pileCode: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加项目桩位信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getPileInfo(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改项目桩位信息";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updatePileInfo(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addPileInfo(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除项目桩位信息编号为"' + ids + '"的数据项？').then(function () {
        return delPileInfo(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('pile/pileInfo/export', {
        ...this.queryParams
      }, `pileInfo_${new Date().getTime()}.xlsx`)
    },
    /** 详情按钮操作 */
    handleDetail(row) {
      getPileInfo(row.id).then(response => {
        this.detailForm = response.data;
        this.detailOpen = true;
      });
    },
    /** 曲线图按钮操作 */
    handleShowChart(row) {
      const code = row.pileCode;
      if (!code) {
        this.$modal && this.$modal.msgError ? this.$modal.msgError("缺少桩位标识，无法查询曲线图") : null;
        return;
      }
      this.chart = null;
      getPileLine(code)
        .then(res => {
          this.chart = res && (res.data || res);

        })
        .catch(() => {
          this.$modal && this.$modal.msgError ? this.$modal.msgError("获取曲线图数据失败") : null;
        })
        .finally(() => {
          this.activeChartTab = 'currentDepth';
          this.chartOpen = true;
          this.chartLoading = false;
        });
      // setTimeout(() => {
      //   this.chartOpen = true;
      //   this.chartLoading = true;
      // }, 1000);
    },
    onChartTabChange() {
      // 切换 Tab 时触发当前可见图表的自适应
      this.$nextTick(() => {
        try {
          // 触发各子组件的 resize（它们在窗口 resize 时会自适应）
          window.dispatchEvent(new Event('resize'))
        } catch (e) { }
      })
    },
    handleDataExport(row) {
      const code = row.pileCode;
      if (!code) {
        this.$modal && this.$modal.msgError ? this.$modal.msgError('缺少桩位标识，无法导出') : null;
        return;
      }
      this.download('pile/pileInfo/dataExport/', {
        code: code
      }, `施工钻进过程数据${new Date().getTime()}.xlsx`)

    }
  }
};
</script>

<style scoped>
.pile-detail-dialog .el-dialog__body {
  background: #f4f6fb;
  padding: 0;
}

.pile-detail-title {
  font-size: 28px;
  font-weight: bold;
  color: #2d3a4b;
  margin-bottom: 36px;
  text-align: center;
  letter-spacing: 2px;
}

.pile-section-title {
  font-size: 18px;
  color: #4a90e2;
  font-weight: bold;
  margin: 32px 0 16px 0;
  border-left: 4px solid #4a90e2;
  padding-left: 12px;
  letter-spacing: 1px;
}

.pile-row-flex {
  display: flex;
  gap: 32px;
  margin-bottom: 12px;
}

.pile-col-flex {
  flex: 1;
}

.pile-detail-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: none;
}

.pile-detail-table th,
.pile-detail-table td {
  padding: 10px 8px;
  font-size: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.pile-detail-table th {
  width: 120px;
  color: #6b7a90;
  background: none;
  font-weight: normal;
  text-align: right;
  vertical-align: top;
  padding-right: 12px;
}

.pile-detail-table td.value {
  color: #222;
  text-align: left;
  font-weight: 500;
}

.pile-detail-table tr:last-child td,
.pile-detail-table tr:last-child th {
  border-bottom: none;
}

.pile-detail-table th.left-align {
  text-align: center;
  padding-left: 0;
  padding-right: 0;
  background: #f7fafd;
}

@media (max-width: 900px) {
  .pile-row-flex {
    flex-direction: column;
    gap: 0;
  }
}

@media (max-width: 600px) {
  .pile-detail-title {
    font-size: 20px;
  }

  .pile-section-title {
    font-size: 15px;
    padding-left: 8px;
  }

  .pile-detail-table th,
  .pile-detail-table td {
    font-size: 13px;
    padding: 7px 4px;
  }
}

/* --- 融合模板的胶囊样式（pill badges）--- */
.badge--pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 92px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, #e5e7eb, #e5e7eb) border-box;
  border: 1px solid transparent;
  color: #111827;
  font-weight: 600;
  letter-spacing: .2px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 0 0 3px rgba(16, 24, 40, .02);
}

.badge--pill .icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
}

.badge--pill .txt {
  line-height: 1;
}

/* 成桩用时配色 */
.badge--time.status-ok {
  background: linear-gradient(#ecfdf3, #ecfdf3) padding-box,
    linear-gradient(135deg, #34d399, #12b76a) border-box;
  color: #027a48;
}

.badge--time.status-warn {
  background: linear-gradient(#fff7ed, #fff7ed) padding-box,
    linear-gradient(135deg, #fdb022, #f79009) border-box;
  color: #b54708;
}

.badge--time.status-danger {
  background: linear-gradient(#fef2f2, #fef2f2) padding-box,
    linear-gradient(135deg, #f97066, #f04438) border-box;
  color: #b42318;
  animation: alert-pulse 2.2s ease-in-out infinite;
}

.badge--time.status-none {
  background: linear-gradient(#f2f4f7, #f2f4f7) padding-box,
    linear-gradient(135deg, #e4e7ec, #d0d5dd) border-box;
  color: #667085;
}

@keyframes alert-pulse {
  0% {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 0 0 3px rgba(240, 68, 56, 0.00);
  }

  50% {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 0 0 5px rgba(240, 68, 56, 0.10);
  }

  100% {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 0 0 3px rgba(240, 68, 56, 0.00);
  }
}

/* 电流配色（蓝系） */
.badge--current.status-ok {
  background: linear-gradient(#eef6ff, #eef6ff) padding-box,
    linear-gradient(135deg, #84caff, #2e90fa) border-box;
  color: #175cd3;
}

.badge--current.status-warn {
  background: linear-gradient(#fff7ed, #fff7ed) padding-box,
    linear-gradient(135deg, #fdb022, #f79009) border-box;
  color: #b54708;
}

.badge--current.status-danger {
  background: linear-gradient(#fef2f2, #fef2f2) padding-box,
    linear-gradient(135deg, #f97066, #f04438) border-box;
  color: #b42318;
}

.badge--current.status-none {
  background: linear-gradient(#f2f4f7, #f2f4f7) padding-box,
    linear-gradient(135deg, #e4e7ec, #d0d5dd) border-box;
  color: #667085;
}

/* 桩深配色（青色系） */
.badge--depth.status-ok {
  background: linear-gradient(#edfcf9, #edfcf9) padding-box,
    linear-gradient(135deg, #5fe1c2, #10b981) border-box;
  color: #067a6f;
}

.badge--depth.status-warn {
  background: linear-gradient(#fff7ed, #fff7ed) padding-box,
    linear-gradient(135deg, #fdb022, #f79009) border-box;
  color: #b54708;
}

.badge--depth.status-danger {
  background: linear-gradient(#fef2f2, #fef2f2) padding-box,
    linear-gradient(135deg, #f97066, #f04438) border-box;
  color: #b42318;
}

.badge--depth.status-none {
  background: linear-gradient(#f2f4f7, #f2f4f7) padding-box,
    linear-gradient(135deg, #e4e7ec, #d0d5dd) border-box;
  color: #667085;
}
</style>
